<template>
    <!--搜索组件开始open-search-form -->
    <div class="main-search-form wow fadeInDown animated">
        <div class="container">
            <div class=" pt-50 pb-50 ">
                <div class="row mb-20">
                    <div class="col-12 align-self-center main-search-form-cover m-auto">
                        <p class="text-center" ><span class="search-text-bg">搜索</span></p>
                        <form action="#" class="search-header">
                            <div class="input-group w-100">
                                <input type="text" class="form-control" placeholder="输入搜索内容">
                                <div class="input-group-append">
                                    <button class="btn btn-search bg-white" type="submit">
                                        <i class="elegant-icon icon_search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row mt-80 text-center">
                    <div class="col-12 font-small suggested-area">
                        <h5 class="suggested font-heading mb-20 text-muted"> <strong>搜索建议:</strong></h5>
                        <ul class="list-inline d-inline-block">
                            <li class="list-inline-item"><a href="category.html">Java</a></li>
                            <li class="list-inline-item"><a href="category.html">Vue</a></li>
                            <li class="list-inline-item"><a href="category.html">Redis</a></li>
                            <li class="list-inline-item"><a href="category.html">Spring</a></li>
                            <li class="list-inline-item"><a href="category.html">异常</a></li>
                            <li class="list-inline-item"><a href="category.html">RabbitMQ</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 搜索组件结束 -->
</template>

<script>
export default {
  mounted(){
    this.openSearchForm();
  },
  methods:{
    // 开启搜索框
    openSearchForm(){
      const bodyElement = document.querySelector('body');
      bodyElement.className = 'open-search-form'
    },
    //关闭搜索框
    closeSearchForm(){
      const bodyElement = document.querySelector('body');
      bodyElement.className = ''
    }
  },
  beforeDestroy(){
    this.closeSearchForm();
  }
}
</script>

<style>

</style>